<!DOCTYPE html>
<html>
<head>
	<title>omg.js | Shapes Extend</title>
	<style>
		html, body {
			margin: 0;
			padding: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
		}
		#canvas {
			margin: 0;
			background-color: #ccc;
		}

	</style>
</head>
<body>
<div id="fps"></div>
<div class="container">
		<canvas id="canvas"></canvas>
</div>
<script src="./omg.min.js"></script>
<script>
	var stage = omg({
		element: document.getElementById('canvas'),
		width: 500,
		height: 500,
		enableGlobalTranslate: false,
		enableGlobalScale: true
	});

	var test = function(settings, _this) {

	  const draw = function() {
	    const canvas = _this.canvas;
	    const scale = _this.scale;

	    // if you want trigger events(includes drag, scale, mousedown, mouseenter...), you must add this line.
	    stage.ext.DefineScale.call(this, scale, 'moveX', 'moveY', 'matrix');

	    const matrix = this.scaled_matrix;

	    canvas.save();
	    canvas.translate(this.scaled_moveX, this.scaled_moveY);
	    canvas.beginPath();

	    matrix.forEach((point, i) => {
	      i === 0 ? canvas.moveTo(point[0], point[1]) : canvas.lineTo(point[0], point[1]);
	    });
	    canvas.lineTo(matrix[0][0], matrix[0][1]);
	    
      canvas.fillStyle = this.color;
      canvas.fill();
	    canvas.closePath();
	    canvas.restore();
	  };

	  return Object.assign({}, stage.ext.display(settings, _this), {
	    type: 'polygon',
	    draw: draw,
	    lineWidth: settings.lineWidth || 1,
	    matrix: settings.matrix
	  });
	};

	stage.extend({
		test: test
	});

	stage.init();

	stage.addChild(stage.graphs.test({
		matrix: [[310, 120], [360, 120], [348, 230], [250, 340], [146, 200]],
		color: '#555'
	}).on('mouseenter', function(cur) {
		cur.color = '#423';
		stage.redraw();
	}).on('mouseleave', function(cur) {
		cur.color = '#555';
		stage.redraw();
	}).config({
		drag: true
	}));
	stage.show();

</script>
</body>
</html>